<template>
  <div>
<el-row>
<!--top-->
  <el-col>
    <el-card>
      <el-form ref="formRef" style="width: 300px">
        <el-form-item  label="车型编号">
          <el-input v-model="filterid"  placeholder="请输入车型编号"/>
        </el-form-item>
        <el-form-item label="应载重量">
          <el-select placeholder="请选择应载重量" v-model="allowableLoad">
            <el-option
            v-for="item in allowableLoadOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应载体积">
          <el-select placeholder="请选择应载体积" v-model="allowableVolume">
            <el-option
              v-for="item in allowableVolumeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input  v-model="filtername" placeholder="请输入车辆类型"/>
        </el-form-item>
        <el-form-item>
          <template #default>
            <el-button type="danger" size="large" @click="filter">搜索</el-button>
            <el-button @click="rest">重置</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-card>
  </el-col>
<!--  bu-->
  <el-col>
    <el-card>
      <el-button size="large" type="danger" @click="showdialog=true">新增车型</el-button>
<!--      表单-->
      <el-table :data="tabdata">
        <el-table-column label="编号" type="index"/>
        <el-table-column label="车型编号" prop="id"/>
        <el-table-column label="车辆类型" prop="name"/>
        <el-table-column label="车型数量" prop="num"/>
        <el-table-column label="应载重量（吨）" prop="allowableLoad"/>
        <el-table-column label="应载体积（立方米）" prop="allowableVolume"/>
        <el-table-column label="长（米）" prop="measureLong"/>
        <el-table-column label="宽（米）" prop="measureWidth"/>
        <el-table-column label="高（米）" prop="measureHigh"/>
        <el-table-column label="操作" >
          <template #default="{row}">
            <el-button type="text" style="color: skyblue" @click="change(row.id)">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-col>
</el-row>
<!--    分页-->
    <el-pagination
      class="tabletop"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginationForm.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
<!--    编辑弹层 dialog-->
<el-dialog :visible="showdialog" title="编辑车型" @close="dialogclose">
  <el-form ref="formref" :model="dialogform" :rules="formProp" style="width: 300px;">
    <el-form-item label="车辆类型" prop="name">
      <el-input placeholder="请输入" v-model="dialogform.name"/>
    </el-form-item>
    <el-form-item label="应载重量" prop="allowableLoad">
      <el-input placeholder="请输入" v-model="dialogform.allowableLoad"/>
    </el-form-item>
    <el-form-item label="应载体积" prop="allowableVolume">
      <el-input placeholder="请输入" v-model="dialogform.allowableVolume"/>
    </el-form-item>
    <el-form-item label="长" prop="measureLong">
      <el-input placeholder="请输入" v-model="dialogform.measureLong"/>
    </el-form-item>
    <el-form-item label="宽" prop="measureWidth">
      <el-input placeholder="请输入" v-model="dialogform.measureWidth"/>
    </el-form-item>
    <el-form-item label="高" prop="measureHigh">
      <el-input placeholder="请输入" v-model="dialogform.measureHigh"/>
    </el-form-item>
<template>
  <el-button type="danger">确认</el-button>
  <el-button @click="dialogclose">取消</el-button>
</template>
  </el-form>
</el-dialog>
  </div>
</template>

<script>

import { getTruckTypePageApi, truckTypeApi } from '@/api/carmodels'

export default {

  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      filterid: '',
      filtername: '',
      allowableLoad: null, // 对应重量下拉框 v-model
      allowableVolume: null, // 对应体积下拉框 v-model
      dialogform: {
        allowableLoad: '',
        allowableVolume: '',
        id: '',
        measureHigh: '',
        measureLong: '',
        measureWidth: '',
        name: ''
      },
      formProp: {
        name: [{ required: true, message: '车型名称不能空', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '应载重量不能空', trigger: 'blur' }, { min: 3, max: 100, message: '长度在 3 到 100个字符', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '应载体积不能空', trigger: 'blur' }, { min: 3, max: 100, message: '长度在 3 到 100个字符', trigger: 'blur' }],
        measureLong: [{ max: 100, message: '长最多输入100', trigger: 'blur' }],
        measureWidth: [{ max: 100, message: '宽最多输入100', trigger: 'blur' }],
        measureHigh: [{ max: 100, message: '高最多输入100', trigger: 'blur' }]
      },
      showdialog: false,
      form: [],
      tabdata: [],
      paginationForm: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      allowableLoadOption: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<1.8 (吨)'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '1.8-6 (吨)'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '6-14吨)'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '14-30 (吨)'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '30-50 (吨)'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '50-100 (吨)'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '>100 (吨)'
        }
      ],

      allowableVolumeOption: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<3 (m³)'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '3-5 (m³)'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '5-10 (m³)'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '10-15 (m³)'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '15-30 (m³)'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '30-50 (m³)'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '50-80 (m³)'
        },
        {
          value: 'RANGE_LEVEL_8',
          label: '80-150 (m³)'
        },
        {
          value: 'RANGE_LEVEL_9',
          label: '>150 (m³)'
        }
      ]

    }
  },
  created () {
    this.getTruck()
  },
  methods: {
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.paginationForm.pageSize = newSize
      console.log(this.paginationForm.pageSize)
    },
    // 监听page改变
    handleCurrentChange (newNum) {
      this.paginationForm.page = newNum
      console.log(this.paginationForm.page)
      this.getTruck()
    },
    // 获取车辆类型分页数据
    async getTruck () {
      const res = await getTruckTypePageApi(this.paginationForm)
      console.log(res)
      this.tabdata = res.data.items
      this.total = +res.data.counts
    },
    // 点击编辑
    async change (id) {
      const res = await truckTypeApi(id)
      console.log(res)
      this.dialogform = res.data
      console.log(this.dialogform)
      this.showdialog = true
    },
    // dialog关弹窗
    dialogclose () {
      this.showdialog = false
      this.$refs.formref.resetFields()
      this.dialogform = {
        allowableLoad: '',
        allowableVolume: '',
        id: '',
        measureHigh: '',
        measureLong: '',
        measureWidth: '',
        name: ''
      }
    },
    // 筛选功能
    async filter () {
      const res = await getTruckTypePageApi({
        page: this.paginationForm.page,
        pageSize: this.paginationForm.pageSize,
        id: this.filterid,
        name: this.filtername,
        allowableLoad: this.allowableLoad,
        allowableVolume: this.allowableVolume
      })
      console.log(res)
      this.tabdata = res.data.items
    },
    // 重置
    rest () {
      this.$refs.formRef.resetFields()
      this.getTruck()
    }

  }
}

</script>

<style scoped>
</style>
